import React, { PureComponent } from 'react'
import { Modal, Table, Button } from 'antd'
import { connect } from 'dva'
import PropTypes from 'prop-types'
import moment from 'moment'
import styles from "./index.less"
import enums from "../creditCar/enums";
import { downloadFileByUrl } from "@/utils/utils"
import MaskText from '@/components/MaskText'

@connect((state) => ({
  overdueCar: state.overdueCar,
}))

export default class ExportTaskModal extends PureComponent {
  static contextTypes = {
    authButton: PropTypes.array,
    dicData: PropTypes.object,
  }
  state = {
    formValues: {},
    initFlag: false,
    visible: false,
    curPage: 1,
    pageSize: 10,
    total: 0,
    taskType: 'MsCreditBusinessOverdueVehicleExport'
  }

  componentDidMount () {
    this.handleTableData()
  }
  handleSubmit = (msg) => {
    const { changeExportTaskModalVisible } = this.props
    changeExportTaskModalVisible(true)
  };
  handleTableData = () => {
    const { curPage, pageSize, taskType } = this.state

    this.setState({
      tableLoading: true,
    })

    this.props.dispatch({
      type: "overdueCar/getDataWithRes",
      payload: {
        url: "/mscreditbusiness/exporttask/page",
        ...{ page: curPage, size: pageSize, taskType },
      },
      callback: (response) => {
        if (response && response.statusCode == "0") {
          if (
            response.data.rows.length === 0 &&
            response.data.pagination.current > 1
          ) {
            this.setState(
              {
                curPage: 1,
                pageSize: 10,
              },
              () => {
                this.handleTableData()
              }
            )
          } else {
            this.setState({
              tableData: response.data.rows,
              total: response.data.pagination.total,
            })
          }
        } else {
          message.error(response.statusMessage)
        }
        this.setState({
          tableLoading: false,
        })
      },
    })
  };

  render () {

    const {
      submitBtnLoading,
      tableData,
      tableLoading,
      curPage,
      pageSize,
      total,
    } = this.state
    const { changeExportTaskModalVisible } = this.props

    const columns = [
      {
        title: '导出时间',
        dataIndex: 'createDate',
        render: (text) => {
          return text != null ? moment(text).format('YYYY-MM-DD HH:mm:ss') : ''
        },
      },
      {
        title: '导出人',
        dataIndex: 'createBy',
        render(val) {
          return <MaskText text={val} type="name" />;
        },
      },
      {
        title: "状态",
        dataIndex: "status",
        render: (text, record) => {
          let findText = enums.taskStatus.array.find((e) => e.value === text)
          return findText ? findText.label : text
        },
      },
      {
        title: "导出结果",
        dataIndex: "url",
        render: (text, record) => {
          // console.log("url:", text);
          if (text) {
            return (
              <a
                onClick={() => {
                  downloadFileByUrl(
                    text,
                    "逾期车辆-" +
                    moment(record.createDate).format("YYYY-MM-DD HH:mm:ss") +
                    ".csv"
                  )
                }}
              >
                文件下载
              </a>
            )
          }
        },
      },
    ]
    const pagination = {
      showSizeChanger: true,
      total: total,
      current: curPage,
      pageSize: pageSize,
      showTotal: () => {
        return <span>共&nbsp;{total}&nbsp;条</span>
      },
    }

    const tableProps = {
      columns,
      pagination,
      rowKey: "sid",
      scroll: { x: "max-content" },
      loading: tableLoading,
      dataSource: tableData,
      onChange: (pagination) => {
        this.setState(
          {
            curPage: pagination.current,
            pageSize: pagination.pageSize,
          },
          () => {
            this.handleTableData()
          }
        )
      },
    }
    return (
      <Modal
        title="导出任务"
        onCancel={() => changeExportTaskModalVisible(false)}
        visible={true}
        width={'60%'}
        footer={[
          <Button
            key="back"
            type="ghost"
            onClick={() => changeExportTaskModalVisible(false)}
          >
            取 消
          </Button>,
          <Button
            key="submit"
            type="primary"
            loading={submitBtnLoading}
            onClick={() => this.handleSubmit("submit")}
          >
            确认
          </Button>,
        ]}
      >
        <div className={styles.exportTaskModal}>
          <div className={styles.table}>
            <Table {...tableProps} />
          </div>
        </div>
      </Modal>
    )
  }
}
